import _get from 'lodash/get';
import PropTypes from 'prop-types';
import React, { Component } from 'react';
import { View, Text, TouchableOpacity, StyleSheet, Image, ImageBackground } from "react-native";
import { connect } from 'react-redux';
import { TYSdk, Utils, IconFont, UnitText, Wave } from 'tuya-panel-kit';
import Strings from '../../i18n';
import dpCodes from '../../config/dpCodes';
import { updateOutdoorState } from '../../redux/actions';
import { getFaultString } from '../../utils';
import icons from '../../res/iconfont.json';
import Res from "../../res";
import imageWaveDark from "../../res/image-wave-dark.png";
import kColor from "../../config/kColor";

const { convertX: cx, convertY: cy } = Utils.RatioUtils;

const {
  fishtank_temperature: fishtank_temperatureCode,
  fishtank_temperature_type: fishtank_temperature_typeCode,
  fishtank_switch: fishtank_switchCode,
  fishtank_water_pumpstatus: fishtank_water_pumpstatusCode,
  temperature_status: temperature_statusCode,
  mode: modeCode,
  fault: faultCode,
} = dpCodes;

class HomeTopView extends Component {
  static propTypes = {
    power: PropTypes.bool,
    mode: PropTypes.string,
    fault: PropTypes.number,
    outdoorState: PropTypes.object.isRequired,
  };

  static defaultProps = {
    fishtank_temperature: '--',
    fishtank_temperature_type: 'celsius',
  };

  constructor(props) {
    super(props);
  }

  async componentDidMount() {
    try {

    } catch (err) {
      console.warn(err);
    }
  }

  _handleCloseFaultTip = () => {
    this.setState({ showFaultTip: false });
  };

  render() {
    const { fishtank_temperature, fishtank_temperature_type, fishtank_switch, fishtank_water_pumpstatus, temperature_status } = this.props;
    let tempType = fishtank_temperature_type === 'celsius' ? "celsius" : "fahrenheit";
    let temp = fishtank_temperature;
    // console.log('fishtank_temperature_type 温度单位', fishtank_temperature_type);

    // 设备温度超过99，设备显示‘HH’,插件也显示HH
    let isHighTemp;
    // if (fishtank_temperature_type === 'celsius') {
      if (fishtank_temperature > 99){
        isHighTemp = true;
        tempType = '';
        temp = 'HH';
      }
    // }else {
    //   if (fishtank_temperature > 210){
    //     isHighTemp = true;
    //     tempType = '';
    //     temp = 'HH';
    //   }
    // }

    // fishtank_water_pumpstatus === 'disconnet' || fishtank_water_pumpstatus === 'dump' || fishtank_water_pumpstatus === 'fault'
    if ( temperature_status === 'Disconnected' || temperature_status === 'Fault') {
      isHighTemp = false;
      tempType = '';
      temp = '--';
    }


    return (
      <View style={styles.container}>

        <UnitText
          value={temp}
          size={80}
          letterWidth={0.6}
          valueColor={kColor.type === 'dark' ? "#f4f4f4" : "#020202"}
          unitColor={kColor.type === 'dark' ? "#f4f4f4" : "#020202"}
          style={styles.centerText}
          unit={tempType}
        />
        { isHighTemp ? <Text style={[ kColor.theme[kColor.type].titleColor, {fontSize:80 }]}>{temp}</Text> : null}
        {/* 鱼缸当前水温 */}
        <Text style={[styles.lightText, kColor.theme[kColor.type].subTitleColor]}>{Strings.home_temp_title}</Text>
        {/*<Wave*/}
        {/*  style={{ width: '100%', height: 100, marginLeft: 0, marginTop: 10 }}*/}
        {/*  H={50}*/}
        {/*  waveParams={[*/}
        {/*    { A: 30, T: 320, fill: "#d7edf9" },*/}
        {/*    { A: 20, T: 290, fill: "#c9eaf9" }*/}
        {/*  ]}*/}
        {/*  animated={fishtank_switch}*/}
        {/*/>*/}
        <Image style={{ width: '100%', height: 123, marginTop: 30 }} source={Res.imageWaveLight}  />

        {/*<View style={{ backgroundColor: '#FF813E', width: '100%', height: 20, marginTop: -35 }}></View>*/}

      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    alignItems: 'center',
    justifyContent: 'center',
    marginTop: cy(8),
  },
  centerText: {
    marginTop: 110,
  },
  lightText: {
    marginTop: 8,
    textAlign: 'center',
    fontSize: 15,
    color: '#757575',
  },
  section__mode: {
    alignItems: 'center',
    justifyContent: 'center',
    paddingHorizontal: cx(16),
    paddingVertical: cy(6),
    borderRadius: cy(15),
  },

  section__quality: {
    flexDirection: 'row',
    alignItems: 'center',
    marginTop: cy(11),
  },

  section__fault: {
    position: 'absolute',
    left: 0,
    right: 0,
    top: 0,
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
    height: cy(36),
    paddingHorizontal: cx(18),
    backgroundColor: '#FF813E',
  },

  quality__left: {
    flexDirection: 'row',
    alignItems: 'center',
    backgroundColor: 'transparent',
  },

  quality__right: {
    alignItems: 'center',
    justifyContent: 'center',
    marginLeft: cx(6),
    paddingHorizontal: cx(6),
  },
  text: {
    fontSize: cx(14),
    color: '#4296F5',
  },

  text__big: {
    fontSize: cx(18),
    marginRight: cx(6),
  },
});

export default connect(({ dpState, outState }) => {
  const { outdoorState } = outState;
  return {
    fishtank_temperature: dpState[fishtank_temperatureCode],
    fishtank_temperature_type: dpState[fishtank_temperature_typeCode],
    fishtank_switch: dpState[fishtank_switchCode],
    fishtank_water_pumpstatus: dpState[fishtank_water_pumpstatusCode],
    temperature_status: dpState[temperature_statusCode],
    mode: dpState[modeCode],
    fault: dpState[faultCode],
    outdoorState,
  };
})(HomeTopView);
